<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <button @click="destroyVm">destroy vm</button>
        <div v-show="isShow">文字</div>
    </div>
    <script>
        let app = new Vue({
            el: '#demo',
            data: {
                isShow: false
            },
            beforeMount(){
                console.log("beforeMount");
            },
            mounted(){ //生命周期方法，初始化显示之后立即调用
                console.log("mounted");
               this.intervalId =  setInterval(()=>{ //箭头函数可以使用外部this
                   console.log("he ");
                    this.isShow = !this.isShow;
                }, 1000);
            },
            beforeDestroy(){ //销毁之前调用
                console.log("beforeDestroy");
                clearInterval(this.intervalId); //清除定时任务
            },
            destroyed(){
                console.log("destroyed");
            },
            beforeCreate(){
                console.log("beforeCreate");
            },
            created(){
                console.log("created");
            },
            beforeUpdate(){
                console.log("beforeUpdate");
            },
            updated(){
                console.log("updated");
            },
            methods: {
                destroyVm(){
                    this.$destroy(); //销毁
                }
            }
        });
    </script>
</body>
</html>